<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>待结算工单</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
	<div id="app" v-cloak>
		<div v-if='allMess'>
			<div class="headers">
				<div class="orderItem" @click='typeSearch(1)'>
					<h1>待确定</h1>
					<p>{{allMess.WAITCONFIRM ? allMess.WAITCONFIRM : 0}}单</p>
				</div>
				<div class="orderItem" @click='typeSearch(3)'>
					<h1>待收票</h1>
					<p>{{allMess.WAITTICK ? allMess.WAITTICK : 0}}单</p>
				</div>
				<div class="orderItem" @click='typeSearch(5)'>
					<h1>待结算</h1>
					<p>{{allMess.WAITSETTLE ? allMess.WAITSETTLE : 0}}单</p>
				</div>
				<div class="orderItem">
					<h1>待结算金额</h1>
					<p>{{allMess.WAITSETTLEFEE ? allMess.WAITSETTLEFEE : 0}}元</p>
				</div>
				<div class="orderItem" @click='typeSearch(6)'>
					<h1>已结算</h1>
					<p>{{allMess.FINISHSETTLE ? allMess.FINISHSETTLE : 0}}单</p>
				</div>
				<div class="orderItem">
					<h1>已结算金额</h1>
					<p>{{allMess.FINISHSETTLEFEE ? allMess.FINISHSETTLEFEE : 0}}元</p>
				</div>
			</div>
			<div class="search">
				  <el-select v-model.trim="platfrom" placeholder="请选择">
				    <el-option
				      v-for="item in allPlat"
				      :key="item.ID"
				      :label="item.COMPNAME"
				      :value="item.COMPNAME">
				    </el-option>
				  </el-select>
				  <div class="orderNum">
				     <el-input v-model.trim="orderNum" placeholder="请输入对账单号"></el-input>
				  </div>
				  <el-date-picker
				      v-model.trim="value4"
				      type="daterange"
					  :picker-options="pickerOptions2"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				  </el-date-picker>
				  <div class="btns">
				    <el-button @click.native='search'>搜索</el-button>
				  </div>
				  <div>
				  	<el-button @click.native="excel">导出</el-button>
				  </div>
			</div>
			<div class="orderTable">
	            <el-table
					v-loading="loading"
	                :data="billArr"
	                :border="true"
	                :highlight-current-row="true"
	                style="width:100%;text-align:center;cursor:pointer;">
	                <el-table-column
	                    :index='funIndex'
	                    type='index'
	                    label="序号" width='80'>
	                </el-table-column>
	                <el-table-column
	                    prop="COMPNAME"
	                    label="平台名称">
	                </el-table-column>
	                <el-table-column
	                    prop="CONFIRMNO"
	                    label="对账单号">
	                </el-table-column>
	                <el-table-column
	                    prop="CREATEDATE"
	                    label="对账发起日期">
	                    <template slot-scope="scope">
	                        <span>{{ scope.row.CREATEDATE | filterTimes}}</span>
	                    </template>
	                </el-table-column>
	                <el-table-column
	                    prop="SETTLEMENTFEE"
	                    label="订单数/合计订单金额">
	                    <template slot-scope="scope">
	                        <span>{{ scope.row.ORDERNUM+"单/￥"+ scope.row.ORDERTOTALFEE}}</span>
	                    </template>
	                </el-table-column>
	                <el-table-column
	                    prop="SETTLEMENTFEE"
	                    label="结算金额" >
	                </el-table-column>
	                <el-table-column
	                    prop="BILLSTATUS"
	                    label="对账状态">
	                    <template slot-scope="scope">
	                        <span v-if='scope.row.BILLSTATUS' :class='{color1:scope.row.BILLSTATUS%2!=0,color2:scope.row.BILLSTATUS%2==0}'>{{ scope.row.BILLSTATUS | filterTypes }}</span><span v-else>--</span>
	                    </template>
	                </el-table-column>
	                <el-table-column
	                    prop="CONFIRMDATE"
	                    label="确认时间">
	                    <template slot-scope="scope">
	                        <span v-if='scope.row.CONFIRMDATE'>{{ scope.row.CONFIRMDATE | filterTimes }}</span><span v-else>--</span>
	                    </template>
	                </el-table-column>
	                <el-table-column
	                    prop="TICKETDATE"
	                    label="开票时间">
	                    <template slot-scope="scope">
	                        <span v-if='scope.row.TICKETDATE'>{{ scope.row.TICKETDATE | filterTimes }}</span><span v-else>--</span>
	                    </template>
	                </el-table-column>
	                <el-table-column
	                    prop="SETTLEMENTDATE"
	                    label="结算时间">
	                    <template slot-scope="scope">
	                        <span v-if='scope.row.SETTLEMENTDATE'>{{ scope.row.SETTLEMENTDATE | filterTimes }}</span><span v-else>--</span>
	                    </template>
	                </el-table-column>
	                <el-table-column
	                    prop="operation"
	                    label="操作">
	                    <template slot-scope="scope">
	                        <el-button @click="settleDetail(scope.row)" type="text" size="small">
	                         <span class="detail">详情</span>
	                        </el-button>
	                    </template>
	                </el-table-column>
	            </el-table>
	            <el-pagination
	                @size-change="handleSizeChange"
	                @current-change="handleCurrentChange"
	                :current-page.sync="page"
	                :page-size="pageMess.limit"
	                layout="prev,pager,next,jumper,total"
	                :background="true"
	                :total="pageMess.total">
	            </el-pagination>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
	<script type="text/javascript" src="./js/tobeSettle.js"></script>
</body>
</html>
